{{extend 'layout.html'}}
<script src="{{=URL('static','js/jquery.js')}}"></script>
<script src="{{=URL('static','js/jquery.flot.min.js')}}"></script>
<script src="{{=URL('static','js/jquery.flot.time.js')}}"></script>
<script src="{{=URL('static','js/jquery.flot.axislabels.js')}}"></script>
<!-- CSS -->
<style type="text/css">
#flotcontainer {
    width: 800px;
    height: 250px;
    text-align: center;
    margin: 0 auto;
}
</style>
 
<!-- Javascript -->
<script>
var data = [];
var dataset;
var totalPoints = 120;
var updateInterval = 1000;
var now = new Date().getTime();
var y; 
 
function GetData() {
    data.shift();
    while (data.length < totalPoints) {   
        function dataload(data1) {
       		y = data1;
        }
        $.get('graphdata.load', dataload);
   
        var temp = [now += updateInterval, y];
 
        data.push(temp);
    }
}
 
var options = {
    series: {
        lines: {
            show: true,
            lineWidth: 1.2,
            fill: true
        }
    },
    xaxis: {
        mode: "time",
        tickSize: [10, "second"],
        tickFormatter: function (v, axis) {
            var date = new Date(v);
 
            if (date.getSeconds() % 20 == 0) {
                var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
 
                return hours + ":" + minutes + ":" + seconds;
            } else {
                return "";
            }
        },
        axisLabel: "Time",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 10
    },
    yaxis: {
        min: 20,
        max: 30,        
        tickSize: 1,
        tickFormatter: function (v, axis) {
            if (v % 5 == 0) {
                return v + "*C";
            } else {
                return "";
            }
        },
        axisLabel: "Water Temperature",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 6
    },
    legend: {        
        labelBoxBorderColor: "#fff"
    }
};
 
$(document).ready(function () {
    GetData();
 
    dataset = [
        { label: "Water Temperature", data: data }
    ];

 
    $.plot($("#flotcontainer"), dataset, options);
    
    function update() {
        GetData();
 
        $.plot($("#flotcontainer"), dataset, options);
        setTimeout(update, updateInterval);
    }
 
    update();
});
 
 
 
</script>
 
<!-- HTML -->
<div id="flotcontainer" style="position:absolute; left:100px; top:200px"></div>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
